<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div
        v-for="(message, index) in messages"
        :key="index"
        class="message"
        :class="message.sender === 'user' ? 'user-message' : 'bot-message'"
      >
        {{ message.text }}
      </div>
    </div>
    <div class="chat-input">
      <input
        v-model="inputText"
        type="text"
        placeholder="输入消息..."
        @keyup.enter="sendMessage"
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatDialog",
  data() {
    return {
      messages: [],
      inputText: "",
    };
  },
  methods: {
    sendMessage() {
      if (this.inputText.trim() === "") {
        return;
      }
      // 创建一个用户发送的消息对象
      const userMessage = {
        sender: "user",
        text: this.inputText,
      };
      // 将用户消息添加到消息列表
      this.messages.push(userMessage);
      // 模拟机器人回复
      setTimeout(() => {
        const botReply = {
          sender: "bot",
          text: "我收到了你的消息：" + this.inputText,
        };
        this.messages.push(botReply);
        this.inputText = "";
      }, 1000);
    },
  },
};
</script>

<style scoped>
.chat-container {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.message {
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.user-message {
  background-color: #dcf8c6;
  align-self: flex-end;
}
.bot-message {
  background-color: #e5e5ea;
  align-self: flex-start;
}
.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}
.chat-input input {
  flex: 1;
  margin-right: 10px;
}
</style>
